<template>
  <div class="index">
    <common-title-bar :mode="'black'" :always="isAlways" :isShowMoreOption="true" :options="{name: '规则', method: 'showRule'}"></common-title-bar>
    <div class="wrap">
      <div class="topContent">
        <p class="today">今日运动赚颜值：<span class="icon" :class="{iconAnimate: iconAnimate}"></span><span>{{index.yanzhi || 0}}</span></p>
        <div class="centerStep" :class="{'iosCenterStep': deviceEnvironment === 'ios'}">
          <p class="todayText">今日可用步数</p>
          <div class="toDayCanUsedStepsWrap">
            <h2>{{todayCanUsedSteps}}</h2>
            <transition name="coinJump">
              <div class="coinsAnimate">
                <div class="coins" v-for="n in coinNum" :key="n" :ref="'coin' + n" :style="{transform: `translate(${Math.floor(Math.random()* 10)}px, ${Math.floor(Math.random()* 10)}px)`}"></div>
              </div>
            </transition>
          </div>
          <div @click="useSteps" class="btn btn1" :class="{'iOSBtn1': deviceEnvironment === 'ios'}"></div>
          <div v-show="deviceEnvironment == 'android'" @click="getSteps" class="btn btn3"></div>
          <p class="tips">步数每日24时清零</p>
        </div>
        <div class="treasure-wrap">
          <div class="box_open" v-if="index.box_status == 1" @click="openBox"></div>
          <div class="box" v-else></div>
          <div class="box-tips" v-if="index.box_status == 0">
            <div class="box-tips-content">再兑换{{index.box_diff_num}}次可打开宝箱</div>
            <span class="iconfont iconsanjiao"></span>
          </div>
          <div class="activity_tip box-tips-text" v-if="index.box_status == 1">可打开</div>
          <div class="box-tips" v-if="index.box_status == 2">
            <div class="box-tips-content" v-if="index.box_status == 2">明天再来拿更多颜值</div>
            <span class="iconfont iconsanjiao"></span>
          </div>
        </div>
        
        <div class="activity-wrap">
          <!--竞赛中不显示icon图标-->
          <div class="activity activity_1" :class="{activity_1_no: index.race_info && ((index.race_info.status == 1 && index.race_info.user_rand != 1) || index.race_info.status == 2) }" @click="goToRunActivity(1)">
            <transition name="fade">
              <!--isShowRankUp名次提升时显示效果-->
              <div class="rankTips" key="steps" v-if="index && index.race_info && index.race_info.status == 1 && !isShowRankUp && index.race_info.user_rand != 1">
                <p>再收集{{index.race_info.diff}}步</p>
                <p>排名提升</p>
              </div>
              <div class="rankTips rankUpTips" key="rank" v-else-if="index && index.race_info && index.race_info.status == 1 && isShowRankUp">
                <p>排名上升至第{{index.race_info.user_rand}}名</p>
              </div>
            </transition>
            <!--竞赛结束，显示名次-->
            <div v-if="index && index.race_info && index.race_info.status == 2" class="rank">{{index.race_info.user_rand}}</div>
            <div class="activity_tip tipJump" v-if="index && index.race_info && index.race_info.status == 2">领取奖励</div>
            <div class="activity_text activity_text_1"></div>
          </div>
          <div class="activity activity_2" @click="goToRunActivity(2)">
            <div class="activity_tip" v-if="index && index.assist_diff_num">差{{index.assist_diff_num}}人</div>
            <div class="activity_text activity_text_2"></div>
          </div>
          <div class="activity activity_3" @click="goToRunActivity(3)">
            <div class="activity_tip" v-if="index && index.bless_status ==0 && index.bless_diff_steps">差{{index.bless_diff_steps}}步</div>
            <div class="activity_tip" v-if="index && index.bless_status ==1">已完成</div>
            <div class="activity_text activity_text_3"></div>
          </div>
          <div class="activity activity_4" @click="goToRunActivity(4)">
            <div class="activity_tip tipJump" v-if="index && index.is_jackpot == 1">可领取</div>
            <div class="activity_text activity_text_4"></div>
          </div>
        </div>
        <div class="coinList">
          <div class="coinWrap leftCoin" :class="{'gray': !todayCanDrawSteps || !canDrawSteps, 'iosLeftCoin': deviceEnvironment === 'ios'}" @click="getTimeSteps(index)">
            <div class="coin">
              <p>+{{index.on_steps_num || 0}}</p>
            </div>
            <div v-if="todayCanDrawSteps && !canDrawSteps" class="times"><span>{{time}}</span>秒后领取</div>
            <div v-else-if="todayCanDrawSteps && canDrawSteps" class="times">立即领取</div>
            <div v-if="!todayCanDrawSteps" class="times">明天再来</div>
            <div class="coinText">整点领步数</div>
          </div>
          <div class="rightCoin" v-if="coinBubbleList.length" :class="{'iosRightCoin': deviceEnvironment === 'ios'}">
            <div v-for="(bubble, i) in coinBubbleList" :key="bubble.id" :style="{top: i * 50 + '%'}">
              <div :class="['coinWrap', bubble.isShow ? '' : 'clickBubble']" :id="'coinBubble_' + bubble.id" @click="getBubbleSteps(bubble, i)">
                <div class="coin">
                  <p>+{{bubble.steps}}</p>
                </div>
                <div class="coinText">{{bubble.name}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="middleWrap">
        <div class="continuousLogin">
          <div class="topBarBg"></div>
          <div class="topTitle">
            <p>连续活跃奖励</p>
            <div class="rightTip" @click="showTip">
              <span>说明</span>
            </div>
          </div>
          <div class="days">
            <div class="day" v-for="n in 7" :key="n">
              <div v-show="n === 3" class="dayTip">奖励加2倍</div>
              <div v-show="n === 7" class="dayTip">奖励加3倍</div>
              <div v-show="n === 3 || n === 7" class="triangle"></div>
              <div class="dayBody" :class="{'activated': index.sign_num >= n}">{{n}}天</div>
            </div>
            <div class="line">
              <div :style="{width: index.sign_num ? Math.floor(((index.sign_num - 1) / 6)*100) + '%' : 0}" class="lineProcess"></div>
            </div>
          </div>
        </div>
        <div class="missions">
          <div class="missionsHeader">
            <h2>做任务赚步数</h2>
            <div v-if="index.isNewUser == 1">
              <div class="lingdang"></div>
              <p>新人7天内，每完成一项任务额外奖励10颜值</p>
            </div>
          </div>
          <div class="mission" v-for="n in index.mission_list" :key="n.id">
            <div class="_left">
              <div :class="['icon', 'icon_' + n.type]"></div>
              <transition name="showTip">
                <div v-if="index.isNewUser == 1 && n.is_finish == 1 && n.is_draw_points == 0" class="tip" @click="getOtherYZ(n)">领取额外奖励</div>
              </transition>
              <div class="desc">
                <p>{{n.name}}</p>
                <i>奖励{{n.steps}}步，每天{{n.num}}次</i>
              </div>
            </div>
            <div class="btnWrap">
              <div v-if="n.is_finish" class="btn hadFinished">已完成</div>
              <div v-else class="btn toFinish" @click="finishMission(n)">去完成</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <overlay :show="isShowNewUserMissionAlert" z-index="11">
      <div class="getYanZhi">
        <h2>新人7天内额外奖励</h2>
        <div class="bg"></div>
        <div class="confirmBtn" @click="getNewUserMissionYanzhi">领取10颜值</div>
        <div class="closeBtn" @click="closeNewUserMissionAlert"></div>
      </div>
    </overlay>
    <overlay :show="isShowClockAlert" z-index="11">
      <div class="clock">
        <h2>运动赚颜值打卡奖励</h2>
        <div class="red"></div>
        <div class="userPhoto"><img v-if="head" :src="photoHttp2Https(head)" alt=""></div>
        <p>+{{points}}颜值</p>
        <div class="confirmBtn" :class="['confirmBtn', onTouch ? 'touch' : '']" @touchstart="() => {onTouch = true}" @touchend="() => {onTouch = false}" @click="getNewUserMission">领取并完成任务</div>
        <span>注：新人7天内，在运动赚颜值每完成一项任务额外奖励10颜值哦</span>
      </div>
    </overlay>
    <transition>
      <rule
        v-show="isShowRule" 
        @closeRule="close" 
        :isShowRule="isShowRule" 
        :content="content" 
        :title="ruleTitle"
        :isShowIcon="isShowIcon"
        :closeBtnType="closeBtnType"
        :customContent="customContent"
      ></rule>
    </transition>
    <!-- 助力弹框 -->
    <overlay :show="isShowAssistanceSteps" z-index="11">
      <assistance-steps
        :isShowAssistanceSteps="isShowAssistanceSteps"
        :userList="userList"
        @invite="inviteHelp"
        @closeAssistanceSteps="closeAssistanceSteps"
      ></assistance-steps>
    </overlay>
    <!-- end -->
    <!-- 助力弹框成功-->
    <overlay :show="isAssistanceAlert" z-index="11">
      <div class="assitance-success">
        <div class="user-photo-wrap">
          <div class="user-photo">
            <img :src="photoHttp2Https(userHead)" alt="">
          </div>
        </div>
        <p>谢谢你的助力，也送你{{rewardSteps}}步</p>
        <div class="assitance-btn" @click="isAssistanceAlert = false">立即去兑换</div>
      </div>
    </overlay>
    <!-- end -->
    <!-- 开宝箱动画 -->
    <overlay :show="isShowAnimate" z-index="11">
      <div class="animate-wrap">
        <div id="animate"></div>
        <transition name="bounce">
          <div class="confirmBtn" @click="addYanzhi" v-show="isShowConfirmBtn">领取{{index.box_points}}颜值</div>
        </transition>
      </div>
    </overlay>
    <!-- end -->
  </div>
</template>

<script>
import Rule from "@/components/runRule/index";
import AssistanceSteps from "@/components/assistanceSteps/AssistanceSteps";
import CommonTitleBar from '@/components/CommonTitleBar'
import {getRunIndex, drawSteps, useSteps, addGameSteps, getAssistUserList, saveUserHelpInfo} from '@/api/request'
import { mapState } from "vuex";
import moment, { months } from 'moment'
import { Toast, Overlay } from 'vant';
import lottie from 'lottie-web';
import * as boxAnimate from '../../../static/animate_run/box.json';
export default {
  data() {
    return {
      reLoad: 0,
      rule: '',
      tip: '',
      content: '',
      index: {},
      steps: 0,
      todaySteps: 0,
      hideSteps: 0,
      time: '00:00',
      timeStatus: 0, // 0：正常1：今日步数已达上限
      running: false,
      ruleTitle: '',
      isShowRule: false,
      isShowIcon: false,
      closeBtnType: 'btn',  // btn  iconfont
      customContent: '',
      coinNum: 0,
      iconAnimate: false,
      canDrawSteps: false, // 能否点击领取步数
      todayCanDrawSteps: false, // 今天领取能否领取
      timer: null, // 倒计时
      countdownTo00: null,
      deviceSteps: 0,
      isShowNewUserMissionAlert: false,
      isShowClockAlert: false,
      onTouch: false,
      currentMission: {},
      points: 0,
      head: '',
      isShowAssistanceSteps: false,
      isShowAnimate: false,
      animation: null,
      isShowConfirmBtn: false,
      inviteInfo: {},
      isShowRankUp: false,
      userRank: 0,
      isAssistanceAlert: false,
      rewardSteps: 0,
      userHead: '',
      userList: [],
      coinBubbleList: []
    };
  },
  components: {
    Rule, AssistanceSteps, CommonTitleBar, Overlay
  },
  async mounted () {
    this.loadAnimation() // 先执行一次，以加载img
    if (this.countdownTo00) {
      clearInterval(this.countdownTo00)
    }
    await this.saveUserHelpInfo().then(res => {
      console.log(res)
    }).catch(e => {
      console.log(e)
      if (e == '18009') {
        this.saveUserHelpInfo()
      } else {
        Toast({
          message: e.msg || e.message,
          duration: 3000
        })
      }
    })
    setTimeout(() => {
      this.getRunIndex('iosGetTime')
    }, 200);
    this.deviceEnvironment === 'ios' && this.webViewFunc('get_run_steps', (data) => { // 监听客户端事件
      let JSONObj = {}
      JSONObj = data
      this.deviceSteps = data.steps
      this.getRunIndex()
    })
    this.deviceEnvironment === 'android' && this.webViewFunc('dorefresh', (data) => { // 监听客户端事件
      this.getRunIndex()
    })
  },
  computed: {
    ...mapState({
      maskIsShow: "maskIsShow",
      isAlways: "isAlways",
      deviceEnvironment: "deviceEnvironment"
    }),
    todayCanUsedSteps () {
      return this.hideSteps.toFixed(0);
    },
    listData() {
      return this.$store.state.serverTime;
    }
  },
  watch: {
    todaySteps (newValue) {
      gsap.to(this.$data, { duration: 0.5, hideSteps: newValue });
    },
    listData (val) {
      let a = moment(moment(val).format('YYYY-MM-DD 23:59:59'))
      let b = moment(val)
      let diffTime = a.diff(b)
      if (this.countdownTo00) {
        clearInterval(this.countdownTo00)
      }
      this.countdownTo00 = setInterval(() => {
        if (diffTime <= 0) {
          this.deviceSteps = 0
          clearInterval(this.countdownTo00)
          this.getRunIndex('iosGetTime')
          return
        }
        diffTime -= 1000
      }, 1000);
    }
  },
  methods: {
    filterName (val) {
      if (!val) return
      switch (val) {
        case 5:
          return '奖池领步数'
        case 6:
          return '奖励步数'
        case 7:
          return '助力领步数'
        case 8:
          return '福包领步数'
        default:
          return '奖励步数'
      }
    },
    loadAnimation () {
      this.$nextTick(() => {
        if (this.animation) {
          console.log('先停止再播放')
          this.animation.stop()
          this.animation.play()
        } else {
          this.animation = lottie.loadAnimation({
            container: document.getElementById('animate'),
            renderer: 'svg',
            loop: true,
            autoplay: true,
            animationData: boxAnimate,
            assetsPath: 'static/animate_run/images/',
            path: '../../../static/animate_run/box.json'
          })
          this.animation.addEventListener('loopComplete', () =>{
            // this.isShowAnimate = false
            // this.animation = null
            // console.log('停止')
            // this.animation.stop()
          })
        }
      })
    },
    webViewFunc (funcName, callback) {
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.registerHandler(funcName, callback)
    },
    inviteHelp () {
      if (this.running) {return}
      this.running = true
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('doShare', {
        type: 1,  // 1 分享网页 2 珠宝小程序 3 宝姐家小程序
        title: this.inviteInfo.shareTitle,
        desc: this.inviteInfo.shareDesc,
        path_url: this.inviteInfo.shareUrl,
        img_url: this.inviteInfo.sharePic
      }, () => {
        this.running = false
        this.isShowAssistanceSteps = false
      })
      setTimeout(() => {
        this.running = false
      }, 1000);
    },
    openBox () {
      this.dataCollect('TE_SPORTFACES_CLICK', '运动赚颜值', {
        ITEM_ID: 1,
        ITEM_NAME: '打开宝箱',
        PAGE_ID: 'SportFaces'
      })
      this.isShowAnimate = true
      this.loadAnimation()
      let timeout1 = setTimeout(() => {
        this.isShowConfirmBtn = true
      }, 3000);
      let timeout2 = setTimeout(() => {
        this.animation.pause()
      }, 6500);
    },
    addYanzhi () {
      this.addGameSteps(1, this.index.box_points, '', () => {
        this.coinAnimate()
        setTimeout(() => {
          this.getRunIndex()
        }, 3000);
      })
    },
    saveUserHelpInfo () {
      return new Promise((resolve, reject) => {
        saveUserHelpInfo({
          type: 1 // 类型1：首页2福包
        }).then(res => {
          if (res.steps > 0) {
            this.rewardSteps = res.steps
            this.userHead = res.head
            this.isAssistanceAlert = true
          }
          resolve(res)
        }).catch(e => {
          reject(e)
        })
      })
    },
    startAnimate () {
      let arr = []
      for (let i = 1; i <= 10; i ++) {
        arr.push(this.$refs['coin' + i])
      }
      TweenMax.staggerTo(arr, 1, {y:"-70", x: "-70", opacity:0}, 0.15);
      this.iconAnimate = true
      setTimeout(() => {
        this.coinNum = 0
        this.iconAnimate = false
      }, 2500);
    },
    coinAnimate () {
      this.coinNum = 10
      let domTimeout = setTimeout(() => {
        this.startAnimate()
      }, 400);
    },
    countDown(seconds){
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(()=>{
        if (seconds == 0) {
          this.todayCanDrawSteps = this.canDrawSteps = true
          return
        }
        seconds -= 1;
        let m = Math.floor(seconds / 60)
        let s = Math.floor(seconds % 60)
        m = m <10? `0${m}`:`${m}`;
        s = s<10? `0${s}`: `${s}`;
        this.time = `${m}:${s}`
      },1000)
    },
    backToApp () {
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goBack')
    },
    goSignInSuccess (route, query={}) {
      console.log(query)
      let urlQuery = ''
      if (Object.keys(query).length) {
        Object.keys(query).forEach(val => {
          urlQuery += '&' + val + '=' +  query[val]
        })
        console.log(urlQuery)
      }
      this.$store.commit('controlMask', {maskState: false})
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goSignInSuccess', {
        url: process.env.HTML_BASE_URL + `${route}?token=${this.$store.state.token}${urlQuery}`
      })
    },
    goToRunActivity (type) {
      if (this.running) {return}
      this.running = true
       switch (type) {
        case 1:
          // this.$router.push({path: '/runCompetition'})
          this.dataCollect('TE_SPORTFACES_CLICK', '运动赚颜值', {
            ITEM_ID: 4,
            ITEM_NAME: '步数竞赛',
            PAGE_ID: 'SportFaces'
          })
          window.WebViewJavascriptBridge ? this.goSignInSuccess('runCompetition') : this.$router.push({path: '/runCompetition'})
          break
        case 2:
          this.dataCollect('TE_SPORTFACES_CLICK', '运动赚颜值', {
            ITEM_ID: 5,
            ITEM_NAME: '好友助力',
            PAGE_ID: 'SportFaces'
          })
          this.running = false
          this.isShowAssistanceSteps = true
          this.getAssistUserList()
          break
        case 3:
          // this.$router.push({path: '/runFortuneBags'})
          this.dataCollect('TE_SPORTFACES_CLICK', '运动赚颜值', {
            ITEM_ID: 6,
            ITEM_NAME: '步数福袋',
            PAGE_ID: 'SportFaces'
          })
          window.WebViewJavascriptBridge ? this.goSignInSuccess('runFortuneBags') : this.$router.push({path: '/runFortuneBags'})
          break
        case 4:
          // this.$router.push({path: '/runAttendance'})
          this.dataCollect('TE_SPORTFACES_CLICK', '运动赚颜值', {
            ITEM_ID: 7,
            ITEM_NAME: '瓜分奖池',
            PAGE_ID: 'SportFaces'
          })
          window.WebViewJavascriptBridge ? this.goSignInSuccess('runAttendance') : this.$router.push({path: '/runAttendance'})
          break
      }
      setTimeout(() => {
        this.running = false
      }, 2000);
    },
    closeAssistanceSteps () {
      this.isShowAssistanceSteps = false
      this.getRunIndex()
    },
    getRunIndex (type = '', param) {
      if (this.reLoad >= 2) {
        Toast({message: '请重新打开尝试', duration: 3000})
        return
      }
      let params = Object.assign({steps: this.deviceSteps}, param)
      getRunIndex(params).then(res => {
        res.times && type == 'iosGetTime' && this.deviceEnvironment == 'ios' && this.getRunSteps(res.times)
        this.index = res
        this.rule = res.motion_rule
        this.tip = res.motion_desc
        this.todaySteps = res.usable
        this.todayCanDrawSteps = res.on_steps_status > 0
        this.canDrawSteps = res.on_steps_time == 0
        // 将所有的气泡放入一个数组
        // if (!type) { // 首次加载会请求两次，加判断避免多次操作
          let coinBubbleList = []
            // 任务气泡
          if (res.user_mission_list.length) {
            res.user_mission_list.forEach((val, i) => {
              coinBubbleList.push({type: 2, steps: val, name: '任务领步数', id: new Date().getTime() + i, isShow: true})
            })
          }
            //  运动步数气泡
          if (res.motion_steps_num > 0) {
            coinBubbleList.push({type: 3, steps: res.motion_steps_num, name: '运动步数', id: new Date().getTime() + 100, isShow: true})
          }
            // 
          if (res.bubble.length) {
            res.bubble.forEach((val, i) => {
              coinBubbleList.push({type: val.type, steps: val.steps, name: this.filterName(val.type), id: new Date().getTime() + i, isShow: true})
            })
          }
          setTimeout(() => {
            this.coinBubbleList = coinBubbleList
          }, 800);
        // }
        if (res.on_steps_time > 0) {
          this.countDown(res.on_steps_time)
        }
        if (res.head) {
          this.points = res.points
        }
        if (res.race_info.user_rand < this.userRank) {
          this.isShowRankUp = true
          setTimeout(() => {
            this.isShowRankUp = false
          }, 2000)
        }
        this.userRank = res.race_info.user_rand
        // 新用户
        if (res.isMedia == 1 && res.points) {
          this.head = res.head
          this.newUserMission()
        }
      }).catch(e => {
        console.log(e)
        if (e == '18009') {
          this.reLoad += 1
          this.getRunIndex()
        } else {
          Toast({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
    getBubbleSteps (bubble, i) {
      if (!this.coinBubbleList[i].isShow) {return}
      this.coinBubbleList[i].isShow = false
      setTimeout(() => {
        let ind = this.coinBubbleList.findIndex((val) => {
          return val.id == bubble.id
        })
        this.coinBubbleList.splice(ind, 1)
      }, 700);
      this.drawSteps(bubble.type, bubble.steps, () => {})
    },
    getTimeSteps (n) { // index.on_steps_status, index.on_steps_num
      this.dataCollect('TE_SPORTFACES_CLICK', '运动赚颜值', {
        ITEM_ID: 0,
        ITEM_NAME: '整点领步数',
        PAGE_ID: 'SportFaces'
      })
      this.drawSteps(1, n.on_steps_num, () => {
        this.getRunIndex('', {noLoading: true})
      })
    },
    drawSteps (type, steps, callback) {
      if (type == 1) {
        if (!this.todayCanDrawSteps) {
          this.$toastMessage({message: '今日次数已达上限'})
          return
        }
        if (!this.canDrawSteps) {
          return
        }
      }
      drawSteps({
        type: type,
        steps: steps,
        noLoading: true
      }).then(res => {
        console.log(res)
        // this.timeStatus = res.status
        this.todaySteps = res.step
        if (callback) {
          callback()
        }
        if (type == 1) {
          this.canDrawSteps = false
        }
        // this.getRunIndex('', {noLoading: true})
      }).catch(e => {
        console.log(e)
        if (e == '18009') {
          this.drawSteps()
        } else {
          Toast({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
    useSteps () {
      if (this.running) {
        return
      }
      this.running = true
      this.dataCollect('TE_SPORTFACES_CLICK', '运动赚颜值', {
        ITEM_ID: 2,
        ITEM_NAME: '步数兑换成颜值',
        PAGE_ID: 'SportFaces'
      })
      useSteps({
        steps: this.todayCanUsedSteps
      }).then(res => {
        console.log(res)
        this.todaySteps = this.todaySteps % 100
        setTimeout(() => {
          this.isShowRule = true
          this.showYanZhiTip(res)
        }, 600);
        setTimeout(() => {
          this.running = false
        }, 2000);
      }).catch(e => {
        console.log(e)
        setTimeout(() => {
          this.running = false
        }, 2000);
        if (e == '18009') {
          this.useSteps()
        } else {
          Toast({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
    getOtherYZ (n) {
      this.$store.commit("controlMask", { maskIsShow: true });
      this.isShowNewUserMissionAlert = true
      this.currentMission = n
    },
    getNewUserMissionYanzhi () {
      if (this.timeout) {
        clearTimeout(this.timeout)
      }
      this.timeout = setTimeout(() => {
        this.$store.commit("controlMask", { maskIsShow: false });
        this.isShowNewUserMissionAlert = false
        this.addGameSteps(2, 10, this.currentMission.event_id, () => {
          this.getRunIndex()
        })
      }, 600);
    },
    closeNewUserMissionAlert () {
      this.$store.commit("controlMask", { maskIsShow: false });
      this.isShowNewUserMissionAlert = false
    },
    newUserMission () {
      this.isShowClockAlert = true
    },
    getNewUserMission () {
      Toast({
        message: '领取成功',
        duration: 3000
      })
      this.isShowClockAlert = false
    },
    addGameSteps (type, points, event_id, callback) {
      addGameSteps({
        type: type, // 类型1：开宝箱赚颜值2：新人额外奖励3：步数竞赛
        points: points,
        event_id: event_id || ''
      }).then(res => {
        console.log(res)
        this.isShowAnimate = this.isShowConfirmBtn = false
        Toast({message: res.msg, duration: 2000})
        
        if (callback) {
          callback()
        }
      }).catch(e => {
        console.log(e)
        if (e == '18009') {
          this.addGameSteps()
        } else {
          Toast({
            message: e.msg || e.message,
            duration: 3000
          })
        }
      })
    },
    getRunSteps (times) {
      this.deviceEnvironment === 'ios' && window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('send_times',{
        times: times
      }, () => {
        
      })
    },
    close() {
      this.isShowRule = false
      this.customContent = ''
    },
    showRule () {
      this.isShowIcon = false
      this.isShowRule = true
      this.ruleTitle = '运动赚颜值规则'
      this.content = this.rule
      this.closeBtnType = 'iconfont'
    },
    showTip () {
      this.isShowIcon = false
      this.isShowRule = true
      this.content = this.tip
      this.ruleTitle = '运动赚颜值规则'
      this.closeBtnType = 'btn'
    },
    showYanZhiTip (res) {
      this.isShowIcon = true
      this.isShowRule = true
      this.closeBtnType = 'btn'
      let _template = `<div>
        <p style="font-size: 0.36rem; color: #383838; text-align: center; margin-top: 0.2rem">恭喜获得${res.yanzhi}颜值</p>
        <p style="font-size: 0.3rem; color: #999999; text-align: center; margin-top: 0.2rem">${res.use_steps}步=${res.yanzhi / res.multiple}颜值</p>
        <p style="display: ${res.multiple && res.multiple > 1 ? 'block' : 'none'}; font-size: 0.4rem; color: #383838; text-align: center; margin-top: 0.2rem">X${res.multiple}倍</p>
      </div>`
      this.customContent = _template
    },
    getSteps () {
      this.dataCollect('TE_SPORTFACES_CLICK', '运动赚颜值', {
        ITEM_ID: 3,
        ITEM_NAME: '同步微信运动',
        PAGE_ID: 'SportFaces'
      })
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goMinProgram')
    },
    goToLive () {
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goCustomPage', {
        url: this.deviceEnvironment == 'ios' ? 'class=LivingBestViewController' : 'RecLiveFragment'
      })
    },
    goToActivity () {
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goCustomPage', {
        url: this.deviceEnvironment == 'ios' ? 'class=ActiveyViewController' : 'ShopFragment'
      })
    },
    goToOrder () {
      window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('goCustomPage', {
        url: this.deviceEnvironment == 'ios' ? 'class=HomepageViewController' : 'HomeMainFragment'
      })
    },
    finishMission (n) {
      if (n.type == 1) {
        this.dataCollect('TE_TASK_CLICK', '运动赚颜值', {
          ITEM_ID: 0,
          ITEM_NAME: '完成3次整点领步数',
          PAGE_ID: 'SportFaces'
        })
      }
      if (n.type == 3) {
        this.dataCollect('TE_TASK_CLICK', '运动赚颜值', {
          ITEM_ID: 1,
          ITEM_NAME: '去app签到',
          PAGE_ID: 'SportFaces'
        })
        this.backToApp()
      }
      if (n.type == 4) {
        this.dataCollect('TE_TASK_CLICK', '运动赚颜值', {
          ITEM_ID: 2,
          ITEM_NAME: '今日累计步数达到3000步',
          PAGE_ID: 'SportFaces'
        })
        this.backToApp()
      }
      if (n.type == 5) {
        this.dataCollect('TE_TASK_CLICK', '运动赚颜值', {
          ITEM_ID: 3,
          ITEM_NAME: '活动页面浏览1分钟',
          PAGE_ID: 'SportFaces'
        })
        this.goToActivity()
      }
      if (n.type == 6) {
        this.dataCollect('TE_TASK_CLICK', '运动赚颜值', {
          ITEM_ID: 4,
          ITEM_NAME: '预约直播',
          PAGE_ID: 'SportFaces'
        })
        this.goToLive()
      }
      if (n.type == 7) {
        this.dataCollect('TE_TASK_CLICK', '运动赚颜值', {
          ITEM_ID: 5,
          ITEM_NAME: 'app内完成下单',
          PAGE_ID: 'SportFaces'
        })
        if (this.index.is_wheel == 0) {
          this.goToActivity()
        } else if (this.index.is_wheel == 1) {
          this.goToOrder()
        }
      }
    },
    getAssistUserList () {
      return new Promise ((resolve, reject) => {
        getAssistUserList({}).then(res => {
          console.log(res)
          this.inviteInfo = res
          let arr = new Array(6)
          for(let i=0; i < arr.length; i++) {
            arr[i] = res.list[i] || false
          }
          // let userlistLength = localStorage.getItem('userlistLength')
          // console.log(userlistLength == null)
          // if (this.index.bubble.length) {
          //   let assistanceArr = this.index.bubble.filter(val => {
          //     return val.type == 6
          //   })
          //   if (assistanceArr.length) {
          //     Toast('领取成功')
          //   }
          // }
          // if (res.list.length) {
          //   if (userlistLength == null || userlistLength == undefined) {
          //     Toast('领取成功')
          //   } else if (userlistLength != res.list.length) {
          //     Toast('领取成功')
          //   }
          // }
          localStorage.setItem('userlistLength', res.list.length)
          this.userList = arr
          resolve(res)
        }).catch(e => {
          console.log(e)
          if (e == '18009') {
            this.getAssistUserList()
          } else {
            Toast({
              message: e.msg || e.message,
              duration: 3000
            })
          }
          reject(e)
        })
      })
    }
  }
};
</script>

<style lang="less" scoped>
.coinJump-enter-active, .coinJump-leave-active {
  transition: all 0.3s;
}
.coinJump-enter, .coinJump-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
.touch{
  filter: brightness(0.8);
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
#animate{
  position: fixed;
  top: 1.76rem;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  width: 5rem;
}
.index {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  // min-height: calc(100vh - constant(safe-area-inset-top));
  // min-height: calc(100vh - env(safe-area-inset-top));
  background: #fff;
  padding-top: calc(constant(safe-area-inset-top) + 44px); /* 兼容 iOS < 11.2 */
  padding-top: calc(env(safe-area-inset-top) + 44px);
  .wrap{
    flex: 1;
    background: #eee;
    .topContent{
      width: 100%;
      height: 8.42rem;
      background: url(../../assets/images/top_bg.png) no-repeat;
      background-size: cover;
      position: relative;

      .today{
        display: flex;
        align-items: center;
        position: absolute;
        top: 0.32rem;
        left: 0.3rem;
        z-index: 2;
        height: 0.5rem;
        background: #fff;
        border-radius: 0.5rem;
        padding: 0 0.24rem;
        color: #000;
        font-size: 0.22rem;
        line-height: 0.5rem;
        padding: 0 0.26rem;

        span{
          font-size: 0.26rem;
          font-weight: 500;
          color: #FFD768;
        }
        .icon{
          width: 0.36rem;
          height: 0.36rem;
          display: inline-block;
          background: url(../../assets/images/coin2.png) no-repeat;
          background-size: contain;
          background-position: left center;
        }
        .iconAnimate{
          animation: jump1 .25s 2s ease infinite;
        }
        @keyframes jump1 {
          0%{
            transform: translateX(0);
          }
          25%{
            transform: translateX(-5px);
          }
          50%{
            transform: translateX(0);
          }
          75%{
            transform: translateX(5px);
          }
          100%{
            transform: translateX(0);
          }
        }
      }
      .centerStep{
        padding-top: 1rem;
        .todayText, .tips{
          font-size: 0.3rem;
          color: #fff;
          text-align: center;
          font-weight: bold;
        }
        .todayText{
          margin-bottom: 0.1rem;
        }
        .toDayCanUsedStepsWrap{
          position: relative;

          h2{
            font-size: 0.8rem;
            color: #fff;
            text-align: center;
          }
          .coinsAnimate{

            .coins{
              position: absolute;
              left: 50%;
              top: 0;
              width: 0.6rem;
              height: 0.6rem;
              background: url(../../assets/images/coin2.png) no-repeat;
              background-size: contain;
            }
          }

        }
        .tips{
          font-size: 0.2rem;
          color: #FFFFFF;
          margin-top: 0.2rem;
        }
        .btn{
          width: 4.18rem;
          height: 1.04rem;
          margin: 0 auto;
        }
        .btn1{
          background: url(../../assets/images/btn1.png) no-repeat;
          background-size: cover;
          animation: btnBreath 1.5s linear infinite;
        }
        @keyframes btnBreath {
          0%{
            transform: scale(1);
          }
          50%{
            transform: scale(1.1);
          }
          100%{
            transform: scale(1);
          }
        }
        .btn2{
          background: url(../../assets/images/btn2.png) no-repeat;
          background-size: cover;
        }
        .btn3{
          background: url(../../assets/images/btn3.png) no-repeat;
          background-size: cover;
        }
        .btn1{
          margin-top: 0.2rem;
        }
        .iOSBtn1{
          margin-top: 0.35rem;
        }
      }
      .treasure-wrap{
        position: absolute;
        top: 0.13rem;
        right: 0.08rem;

        .box{
          width: 1.36rem;
          height: 1.36rem;
          background: url(../../assets/images/box.png) no-repeat;
          background-size: contain;
          transform-origin: center;
          animation: clock 2.5s linear infinite;
        }
        .box_open{
          width: 1.27rem;
          height: 1.4rem;
          background: url(../../assets/images/box_open.png) no-repeat;
          background-size: contain;
          transform-origin: center;
          animation: clock 2.5s linear infinite;
        }
        .box-tips{
          position: absolute;
          right: 1.36rem;
          top: 50%;
          transform: translateY(-50%);
          width: 1.4rem;
          background: #FFF4BF;
          border-radius: 0.2rem;

          .iconsanjiao{
            position: absolute;
            top: 50%;
            right: -0.2rem;
            font-size: 0.2rem;
            color: #FFF4BF;
            transform: translateY(-50%) rotate(-90deg);
          }
          .box-tips-content{
            font-size: 0.2rem;
            color: #8B410A;
            padding: 0.1rem;
          }
        }
        .box-tips-text{
          top: 0.02rem;
          left: 0;
          transform: translateX(-50%);
          border-radius: 0.18rem 0.18rem 0 0.18rem;
        }
      }
      .rankTips{
        position: absolute;
        top: 0.1rem;
        left: -0.43rem;
        width: 2rem;
        font-size: 0.2rem;
        color: #fff;
        font-weight: bold;
        color: #FFFFFF;
        text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.16);
        text-align: center;
        line-height: 0.3rem;
        white-space: nowrap;
        text-align: center;
      }
      .rankUpTips{
        width: 2rem;
        left: -0.43rem;
        top: 45%;
        transform: translateY(-50%);
      }
      .rank{
        font-size: 0.54rem;
        color: #fff;
        line-height: 0.75rem;
        font-weight: 500;
        text-align: center;
        margin-top: 0.1rem;
      }
      .activity_tip{
        position: absolute;
        top: -0.2rem;
        left: 0.7rem;
        font-size: 0.2rem;
        z-index: 2;
        color: #fff;
        border: 0.02rem solid #FFFFFF;
        background: linear-gradient(270deg, #FF8C40 0%, #FF4343 100%);
        border-radius: 0.18rem 0.18rem 0.18rem 0;
        white-space: nowrap;
        padding: 0 0.05rem;
      }
      .tipJump{
        top: -0.27rem;
        transform-origin: left bottom;
        animation: tipJump 3s linear infinite;
      }
      @keyframes tipJump {
        0%{
            transform: rotate(-0deg);
          }
          8%{
            transform: rotate(-4deg);
          }
          16%{
            transform: rotate(4deg);
          }
          24%{
            transform: rotate(-4deg);
          }
          32%{
            transform: rotate(4deg);
          }
          40%{
            transform: rotate(0deg);
          }
          100%{
            transform: rotate(0);
          }
      }
      .activity-wrap{
        margin-top: 0.37rem;
        padding: 0 0.59rem;
        display: flex;
        justify-content: space-between;

        .activity{
          position: relative;
          width: 1.14rem;
          height: 1.14rem;
          background-color: #fbfbfb;
        }
        .activity_text{
          width: 1.14rem;
          height: 0.4rem;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: -0.1rem;
        }
        .activity_1{
          background: url(../../assets/images/activity_1.png) no-repeat;
          background-size: 1.14rem 1.14rem;
          background-position: center;
        }
        .activity_1_no{
          width: 1.0rem;
          height: 1.0rem;
          border: 0.07rem solid #CEFAFF;
          background: linear-gradient(358deg, #00BBF6 0%, #34C7FF 100%);
          border-radius: 50%;

          .activity_text{
            bottom: -0.17rem;
          }
          .rankTips{
            left: -0.5rem;
          }
        }
        .activity_2{
          background: url(../../assets/images/activity_2.png) no-repeat;
          background-size: 1.14rem 1.14rem;
          background-position: center;
        }
        .activity_3{
          background: url(../../assets/images/activity_3.png) no-repeat;
          background-size: 1.14rem 1.14rem;
          background-position: center;
        }
        .activity_4{
          background: url(../../assets/images/activity_4.png) no-repeat;
          background-size: 1.14rem 1.14rem;
          background-position: center;
        }
        .activity_text_1{
          background: url(../../assets/images/activity_text_1.png) no-repeat;
          background-size: contain;
        }
        .activity_text_2{
          background: url(../../assets/images/activity_text_2.png) no-repeat;
          background-size: contain;
        }
        .activity_text_3{
          background: url(../../assets/images/activity_text_3.png) no-repeat;
          background-size: contain;
        }
        .activity_text_4{
          background: url(../../assets/images/activity_text_4.png) no-repeat;
          background-size: contain;
        }
      }
      .iosCenterStep{
        padding-top: 1.7rem;
      }
      .coinList{
        @keyframes jump {
          0%{
            transform: translateY(0);
          }
          25%{
            transform: translateY(3px);
          }
          50%{
            transform: translateY(0);
          }
          75%{
            transform: translateY(-3px);
          }
          100%{
            transform: translateY(0);
          }
        }
        .coinWrap{
          min-width: 1.28rem;
          animation: jump 1.5s linear infinite;
          margin-bottom: 0.2rem;
          transition: 1s;
          .coin{
            width: 1.28rem;
            height: 1.28rem;
            background: url(../../assets/images/coin1.png) no-repeat;
            background-size: cover;
            margin: 0 auto;

            p{
              font-size: 0.26rem;
              color: #FFFFFF;
              text-shadow:0px 3px 6px rgba(255,145,0,0.84);
              text-align: center;
              line-height: 1.28rem;
              font-weight: bold;
            }
          }
          .times{
            display: table;
            margin: -0.2rem auto 0;
            height: 0.32rem;
            line-height: 0.33rem;
            background: #FFF4BF;
            font-size: 0.16rem;
            color: #8B410A;
            border-radius: 0.16rem;
            text-align: center;
            padding: 0 0.1rem;

            span{
              width: 0.6rem;
              display: inline-block;
              text-align: center;
            }
          }
          .coinText{
            font-size: 0.22rem;
            color: #fff;
            text-align: center;
            margin: 0 -0.2rem;
            margin-top: 0.1rem;
          }
        }
        .leftCoin{
          position: absolute;
          top: 1rem;
          left: 0.3rem;
          // min-width: 2rem;
        }
        .iosLeftCoin{
          top: 1.4rem;
        }
        .gray{
          filter: grayscale(1) !important;
          animation: none;
        }

        @keyframes fade {
          0%{
            transform: scale(0.5);
            opacity: 0;
          }
          75%{
            transform: scale(1.2);
            opacity: 1;
          }
          100%{
            transform: scale(1);
            opacity: 1;
          }
        }
        .rightCoin{
          position: absolute;
          top: 1.6rem;
          right: 0.2rem;
          width: 2.6rem;
          height: 3.75rem;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          animation: fade 0.4s ease;
          
          >div{
            position: absolute;
            top: 0;
            right: 0;
            transition: 0.3s;
          }
          .coinWrap{
            margin: 0.1rem;
          }
          .clickBubble {
            animation: bubbleClick 0.8s ease;
          }
          @keyframes bubbleClick {
            0%{
              transform: scale(1);
              opacity: 1;
            }
            25%{
              transform: scale(1.1);
              opacity: 1;
            }
            100%{
              transform: scale(0.1);
              opacity: 0;
            }
          }
        }
        .iosRightCoin{
          top: 1.86rem;
        }
      }
    }
    .middleWrap{
      width: 6.9rem;
      margin: 0 auto;
      transform: translateY( -1.18rem);
    }
    .continuousLogin{
      background: #fff;
      border-radius: 10px;
      position: relative;
      padding: 0.3rem;

      .topBarBg{
        position: absolute;
        top: -0.1rem;
        left: 0;
        right: 0;
        margin: auto;
        width: 6.07rem;
        height: 0.3rem;
        background: url(../../assets/images/bar.png) no-repeat;
        background-size: contain;
      }
      .topTitle{
        position: relative;
        p{
          font-size: 0.3rem;
          color: #000;
          margin-top: 0.2rem;
          font-weight: bold;
        }
        .rightTip{
          position: absolute;
          top: 0;
          right: -0.3rem;
          height: 0.34rem;
          background-color: #FFF4BF;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 0.2rem 0 0.4rem;
          border-radius: 0.17rem 0 0 0.17rem;
          background-image: url(../../assets/images/desc.png);
          background-repeat: no-repeat;
          background-size: 0.16rem 0.16rem;
          background-position: 0.17rem center;

          svg{
            width: 0.26rem;
            height: 0.26rem;
            fill: #8B410A;
          }
          span{
            font-size: 0.16rem;
            color: #8B410A;
          }
        }
      }
      .days{
        display: flex;
        margin: 0.22rem auto 0;
        justify-content: space-between;
        position: relative;

        .day{
          display: flex;
          align-items: center;
          position: relative;
          padding-top: 0.47rem;
          z-index: 2;
          .dayTip{
            position: absolute;
            top: 0;
            left: -50%;
            word-break: keep-all;
            font-size: 0.18rem;
            color: #8B410A;
            background: #FFF4BF;
            border-radius: 5px;
            text-align: center;
            line-height: 0.34rem;
            height: 0.34rem;
            padding: 0 0.08rem;
          }
          .triangle{
            position: absolute;
            top: 0.34rem;
            left: 0;
            right: 0;
            margin: auto;
            width: 0;
            height: 0;
            border-top: 0.08rem solid #FFF4BF;
            border-right: 0.08rem solid transparent;
            border-left: 0.08rem solid transparent;
          }
          .dayBody{
            width: 0.6rem;
            height: 0.6rem;
            background: url(../../assets/images/day_0.png) no-repeat;
            background-size: contain;
            border-radius: 50%;
            font-size: 0.2rem;
            color: #000;
            text-align: center;
            line-height: 0.6rem;
          }
          .activated {
            background: url(../../assets/images/day_1.png) no-repeat;
            background-size: contain;
            color: #fff;
          }
        }
        .line{
          position: absolute;
          left: 0.3rem;
          bottom: 0.26rem;
          z-index: 1;
          width: 5.7rem;
          height: 0.08rem;
          background: #D5D5D5;
          opacity: .3;

          .lineProcess{
            width: 50%;
            height: 100%;
            background: #FFC422;
          }
        }
      }
    }
    .missions{
      background: #fff;
      border-radius: 10px;
      margin-top: 0.2rem;
      .missionsHeader{
        padding: 0.36rem 0 0.3rem;
        border-bottom: 1px solid #EEEEEE;
        h2{
          font-size: 0.32rem;
          color: #000000;
          text-align: center;
          line-height: 1;
        }
        >div{
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 0.2rem;

          .lingdang{
            width: 0.22rem;
            height: 0.28rem;
            background: url(../../assets/images/lingdang.png) no-repeat;
            background-size: contain;
            transform-origin: center top;
            animation: clock 3s linear infinite;
            margin-right: 0.12rem;
          }
          @keyframes clock {
            0%{
              transform: rotate(-0deg);
            }
            8%{
              transform: rotate(-10deg);
            }
            16%{
              transform: rotate(10deg);
            }
            24%{
              transform: rotate(-10deg);
            }
            32%{
              transform: rotate(10deg);
            }
            40%{
              transform: rotate(0deg);
            }
            100%{
              transform: rotate(0);
            }
          }
          >p{
            font-size: 0.24rem;
            color: #00BBF6;
            text-align: center;
            line-height: 0.28rem;
          }
        }
      }

      .mission{
        display: flex;
        justify-content: space-between;
        padding: 0 0.3rem;
        border-bottom: 1px solid #EEEEEE;
        height: 1.6rem;

        ._left{
          position: relative;
          flex: 1;
          display: flex;
          align-items: center;
          overflow: hidden;

          .tip{
            position: absolute;
            top: 0.1rem;
            left: 1.9rem;
            width: 1.44rem;
            height: 0.51rem;
            background: url(../../assets/images/tip.png) no-repeat;
            background-size: contain;
            font-size: 0.2rem;
            color: #fff;
            text-align: center;
          }
          .showTip-enter-active {
            animation: bounce-in .5s;
          }
          .showTip-leave-active {
            animation: bounce-in .5s reverse;
          }
          @keyframes bounce-in {
            0% {
              transform: scale(0);
            }
            50% {
              transform: scale(1.5);
            }
            100% {
              transform: scale(1);
            }
          }
          .icon{
            width: 0.4rem;
            height: 0.4rem;
            margin-right: 0.3rem;
          }
          .icon_1{
            background: url(../../assets/images/icon_1.png) no-repeat;
            background-size: cover;
          }
          .icon_2{
            background: url(../../assets/images/icon_2.png) no-repeat;
            background-size: cover;
          }
          .icon_3{
            background: url(../../assets/images/icon_3.png) no-repeat;
            background-size: cover;
          }
          .icon_4{
            background: url(../../assets/images/icon_4.png) no-repeat;
            background-size: cover;
          }
          .icon_5{
            height: 0.31rem;
            background: url(../../assets/images/icon_5.png) no-repeat;
            background-size: cover;
          }
          .icon_6{
            background: url(../../assets/images/icon_6.png) no-repeat;
            background-size: cover;
          }
          .icon_7{
            width: 0.32rem;
            background: url(../../assets/images/icon_7.png) no-repeat;
            background-size: cover;
          }
          .desc{
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            p{
              font-size: 0.29rem;
              color: #000000;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
            i{
              font-size: 0.22rem;
              color: #999999;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }
        .btnWrap{
          display: flex;
          align-items: center;
          .btn{
            width: 1.49rem;
            height: 0.56rem;
            border-radius: 0.28rem;
            font-size: 0.24rem;
            color: #fff;
            text-align: center;
            line-height: 0.56rem;
          }
          .hadFinished{
            background: #D5D5D5;
          }
          .toFinish{
            background: linear-gradient(358deg, #00BBF6 0%, #34C7FF 100%);
          }
        }
      }
    }
  }
  .getYanZhi{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5.1rem;
    z-index: 100;

    >h2{
      font-size: 0.4rem;
      color: #fff;
      text-align: center;
      font-weight: 400;
    }
    .bg{
      width: 5.1rem;
      height: 5.1rem;
      background: url(../../assets/images/yz.png) no-repeat;
      background-size: contain;
      margin-top: -0.3rem;
    }
    .confirmBtn{
      width: 4.35rem;
      height: 0.97rem;
      font-size: 0.36rem;
      color: #8B410A;
      text-align: center;
      line-height: 0.97rem;
      background: url(../../assets/images/yzConfirm.png) no-repeat;
      background-size: contain;
      margin: -0.5rem auto 0;
    }
    .closeBtn{
      width: 0.7rem;
      height: 0.7rem;
      background: url(../../assets/images/yzClose.png) no-repeat;
      background-size: contain;
      margin: 0.54rem auto 0;
    }
  }
  .clock{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 5.8rem;
    height: 8.1rem;
    background-color: #fff;
    background-image: url(../../assets/images/clockTop.png);
    background-size: 100% auto;
    background-position: left top;
    background-repeat: no-repeat;
    border-radius: 0.2rem;
    z-index: 100;

    >h2{
      font-size: 0.4rem;
      text-align: center;
      color: #fff;
      margin: 0.48rem auto 0;
    }
    .userPhoto{
      width: 2.26rem;
      height: 2.26rem;
      border-radius: 1.2rem;
      margin: 0.47rem auto 0;
      overflow: hidden;
      border: 0.07rem solid #fff;
      background-color: #fff;

      img{
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
      }
    }
    >p{
      font-size: 0.46rem;
      color: #000;
      text-align: center;
      margin: 0.86rem auto 0;
    }
    .confirmBtn{
      width: 4.5rem;
      height: 0.86rem;
      background: linear-gradient(180deg, #FFED3C 0%, #FFB91C 100%);
      font-size: 0.36rem;
      color: #fff;
      text-align: center;
      line-height: 0.86rem;
      border-radius: 0.43rem;
      margin: 0.4rem auto 0;
    }
    >span{
      display: block;
      font-size: 0.24rem;
      color: #999999;
      width: 4.46rem;
      line-height: 0.36rem;
      margin: 0.27rem auto 0;
    }
    .red{
      position: absolute;
      top: 3.18rem;
      width: 5.8rem;
      height: 1.5rem;
      background: url(../../assets/images/clockRed.png) no-repeat;
      background-size: contain;
    }
  }
  .animate-wrap .confirmBtn{
    position: fixed;
    top: 8.67rem;
    left: 50%;
    z-index: 11;
    transform: translateX(-50%);
    width: 4.49rem;
    height: 0.97rem;
    background: url(../../assets/images/yzConfirm.png) no-repeat;
    background-size: contain;
    font-size: 0.36rem;
    color: #8B410A;
    text-align: center;
    line-height: 0.97rem;
  }
  .assitance-success{
    width: 5.8rem;
    height: 6.27rem;
    background: #fff;
    border-radius: 0.2rem;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 11;
    transform: translate(-50%, -50%);

    .user-photo-wrap{
      width: 3.65rem;
      height: 2.87rem;
      margin: 0.7rem auto 0;
      background: url(../../assets/images/photoBg.png) no-repeat;
      background-size: 3.65rem 2.05rem;
      background-position: center bottom;

      .user-photo{
        width: 2.24rem;
        height: 2.24rem;
        border: 0.08rem solid #FFE738;
        margin: 0 auto;
        border-radius: 1.2rem;
        overflow: hidden;

        img{
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover;
        }
      }
    }
    >p{
      font-size: 0.36rem;
      color: #000;
      text-align: center;
      margin: 0.36rem auto 0 ;
    }
    .assitance-btn{
      width: 4.5rem;
      height: 0.86rem;
      font-size: 0.36rem;
      color: #fff;
      text-align: center;
      line-height: 0.86rem;
      margin: 0.36rem auto 0;
      border-radius: 0.43rem;
      background: linear-gradient(180deg, #FFED3C 0%, #FFB91C 100%);
    }
  }
}
</style>